<template>
  <div id="container" style="width: 100%;height: 100vh"></div>
  <!-- 设置宽和高 -->
</template>

<script>

import {Decimal} from 'decimal.js'
export default {
  name:"userMap",
  data() {
    return {
      //要标记的所有点的经纬度
      Coordinate:[],
      //  Coordinate:[
      //    {
      //      lng:"54.323243",
      //      lat:"43.654322"
      //    }
      //  ]  //后端返回的数据格式
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  mounted() {
    this.carGPSIP()
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container",
          {resizeEnable: true,
           // center: this.user.address
          });//初始化地图
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      //遍历生成多个标记点 因后端返回是map格式因此需要判断code
      this.request.get('Pbss/list').then(res => {
        if (res.code === '200') {
          console.log(res);
          this.Coordinate=res.data
          console.log(this.Coordinate)
          this.Coordinate = res.data; //拿到数据
          let Coordinate=res.data;
          //定义Coordinate
          for (var i = 0; i < this.Coordinate.length; i++) {
            var marker = new AMap.Marker({
              position: new AMap.LngLat( Coordinate[i].addrY,  Coordinate[i].addrX), //不同标记点的经纬度
              icon:Coordinate[i].sendCount>5?"//vdata.amap.com/icons/b18/1/2.png":'',
              map: map,

            });
            marker.content ="投放点名称："+ Coordinate[i].pbssName+","+"充电宝数量："+Coordinate[i].pbCount ;
            marker.on("click", markerClick);
            marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
          }
          function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          }
          map.setFitView();
        }
      });
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();

    }
  },
}
</script>


<style>

</style>
